<template>
    <div class="main" v-if="list.length > 1">
        <div class="nav-list">
            <div class="nav-item" v-for="(item, index) in list" :key="item.classifieId" @click="handleClick(index, item.classifieId)"
                 :class="navIndex === index ? 'active' : ''">
                {{item.classifieName}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavList",
        data() {
            return {
                navIndex: 0,
                list: [
                    {classifieId: "", classifieName: "全部", headUrl: ""}
                ]
            }
        },
        created() {
            this.initData()
        },
        methods: {
            initData() {
                this.$axios({actionName: 'bbs.article.classifie'}).then( res => {
                    this.list = this.list.concat(res.data)
                })
            },
            handleClick(index, id) {
                if (this.navIndex === index) return
                this.navIndex = index
                this.$emit('selectIndex', index, id)
            }
        }
    }
</script>

<style lang="less" scoped>
    .main {
        width: 100%;
        min-width: 1128px;
        background: rgba(0, 0, 0, .04);
        
        .nav-list {
            .flexed(flex-start);
            height: 48px;
            width: 1128px;
            padding-left: 100px;
            margin: 0 auto;
            /*margin-left: 130px;*/
            
            .nav-item {
                padding: 0 22px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                font-size: 14px;
                font-weight: 300;
                color: rgba(0, 0, 0, 1);
                cursor: pointer;
    
                -webkit-user-select:none;
    
                -moz-user-select:none;
    
                -ms-user-select:none;
    
                user-select:none;
            }
            
            .active {
                background: rgba(255, 220, 32, .4);
                font-weight: bold;
            }
        }
    }

</style>
